import styled from "styled-components/native";
import { TouchableOpacity } from "react-native";
import { /*RFValue*/ } from "react-native-responsive-fontsize";
import { Icon } from "../Icon/index"

import LinearGradient from 'react-native-linear-gradient';



export const AddTask = styled(TouchableOpacity)`
  position: absolute;
  bottom: ${/*RFValue*/(24)}px;
  right: ${/*RFValue*/(16)}px;
  z-index: 1;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);
  border-radius: 99999px;
`;

export const QuickAddTask = styled(TouchableOpacity)`
  position: absolute;
  bottom: ${/*RFValue*/(100)}px;
  right: ${/*RFValue*/(16)}px;
  z-index: 1;
  border-radius: ${/*RFValue*/(16)}px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.12);
`;

export const QuickActionTask = styled(TouchableOpacity)`
  position: absolute;
  padding: ${/*RFValue*/(6)}px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: ${/*RFValue*/(16)}px;
  bottom: ${/*RFValue*/(175)}px;
  right: ${/*RFValue*/(16)}px;
  width: ${56}px;
  z-index: 1;
  
`;

export const QuickActionGroup = styled.View`
  background-color: rgba(240, 241, 243, 0.32);
  border-radius: ${/*RFValue*/(16)}px;
`;

export const AddTaskWrapper = styled(LinearGradient)`
  
  background-color: ${({ theme }) => theme.colors["create_button"]};
  border-radius: ${/*RFValue*/(16)}px;
  align-items: center;
  justify-content: center;
  width: ${/*RFValue*/(56)}px;
  height: ${/*RFValue*/(56)}px;
`;

export const AddTaskIcon = styled(Icon)`
  font-size: ${/*RFValue*/(24)}px;
  color: ${({ theme }) => theme.colors.black};
`;

export const ButtonContainer = styled(TouchableOpacity)`
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: rgba(240, 241, 243, 0.32);
  padding: ${/*RFValue*/(12)}px 0px;
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
`;

export const ButtonText = styled.Text`
  font-size: ${/*RFValue*/(12)}px;
  font-family: HarmonyOS_Sans_SC_Regular;
  color: rgba(44, 44, 46, 1);
  font-weight: 400;
  flex-wrap: nowrap;
  overflow: hidden;
`;
